<template>
  <el-select
    ref="selectTree"
    v-model="value"
    :placeholder="placeholder"
    v-bind="$attrs"
    :multiple="false"
    clearable
    @remove-tag="removeTag"
  >
    <el-option value="" />
    <!-- 隐藏单选框 -->
      <!-- :show-checkbox="this.$attrs.multiple" -->
    <el-tree
      ref="treeOption"
      default-expand-all
      highlight-current
      accordion
      node-key="id"
      check-on-click-node
      :data="options"
      :props="defaultProps"
      @check="checkNode"
    />
  </el-select>
</template>

<script>
export default {
  name: 'CisTreeSelect',
  props: {
    placeholder: {
      type: String,
      default: () => {
        return '请选择'
      }
    },
    // 节点数据
    options: {
      type: Array, // 必须是树形结构的对象数组
      default: () => {
        return []
      }
    },
    // 设置lable value属性,当你修改了value或者label时,也要在下面的checkNode方法里面修改,否则select不显示
    defaultProps: {
      type: Object,
      default: () => {
        return {
          value: 'id', // ID字段名
          label: 'label', // 显示名称
          children: 'children' // 子级字段名
        }
      }
    },
    // 默认勾选的节点
    defaultCheckNodes: {
      type: Array, // 已经分配的资源
      default: () => {
        return []
      }
    },
    // 是否可以选择父节点(有子节点的,不能选)
    isSelectParent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: []
    }
  },
  created() {
    console.log("🚀 ~ file: selectTree.vue ~ line 64 ~ defaultProps", this.defaultProps)
  },
  methods: {
    // 删除tag时，
    removeTag(val) {
      // 取消勾选
      const treeOption = this.$refs.treeOption;
      treeOption.setChecked(val, false, false);

      // 重新给控件赋值
      this.$emit('input', this.value);
    },
    // 勾选节点，
    checkNode(node, treeStatus) {
      // 有子节点的不能选择, isSelectParent:是否可以选择父节点
      if(!this.isSelectParent && node.children && node.children.length > 0) {
        return
      }
      // 回显选择的节点数据
      node.value = node[this.defaultProps.value]; 
      node.currentLabel = node[this.defaultProps.label];
      // 给selectTree的cachedOptions赋值 设置node.label，使用页面显示label值
      const selectTree = this.$refs.selectTree;
      selectTree.cachedOptions.push(node);
      selectTree.handleOptionSelect(node, true);
      this.$emit('input', this.value);
    }
  }
}
</script>

<style scoped lang="less">
  /* 去除tree上面的一行高度 */
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        padding: 0;
    }

</style>